<template>
    <div>
        <van-index-bar :sticky-offset-top="46" :index-list="indexList">
            <template v-for="cities in citiesData">
                <van-index-anchor :index="cities.letter.toUpperCase()" />
                <van-cell v-for="city in cities.data" :title="city.name" @click="changeCity(city.name)" />
            </template>
        </van-index-bar>
    </div>
</template>
<script lang='ts' setup>
import { ref, onMounted, computed } from 'vue';
import { getCities } from '@/service/api';
import { useCardListStore } from '@/stores/cardStore';
const cardListStore = useCardListStore()
const citiesData = ref<Cities[]>([]);
type Cities = {
    letter: string
    data: [
        {
            cityId: number,
            name: string,
            pinyin: string,
            isHot: number
        }
    ]
}

function changeCity(city: string) {
    cardListStore.cities = city
}

onMounted(async () => {
    const result = await getCities();
    citiesData.value = result.data
})

const indexList = computed(() => {
    let arr: string[] = []
    citiesData.value.forEach(item => {
        arr.push(item.letter.toUpperCase())
    })
    return arr;
})

</script>
<style lang='less' scoped>

</style>